<!doctype html>
<html lang="en-US">
  <head>
    <link href="/assets/index.css" rel="stylesheet" type="text/css" />
    <link href="./css/pauseAnimation.css" rel="stylesheet" type="text/css" />
    <script crossorigin="anonymous" src="https://unpkg.com/react@16.8.6/umd/react.production.min.js"></script>
    <script crossorigin="anonymous" src="https://unpkg.com/react-dom@16.8.6/umd/react-dom.production.min.js"></script>
    <script crossorigin="anonymous" src="/test-harness.js"></script>
    <script crossorigin="anonymous" src="/test-page-object.js"></script>
    <script crossorigin="anonymous" src="/__dist__/webchat-es5.js"></script>
  </head>
  <body>
    <main id="webchat"></main>
    <script type="importmap">
      {
        "imports": {
          "@testduet/wait-for": "https://unpkg.com/@testduet/wait-for@main/dist/wait-for.mjs"
        }
      }
    </script>
    <script type="module">
      import { waitFor } from '@testduet/wait-for';

      const streamingFormat = new URL(window.location.href).searchParams.get('streamingFormat') ?? 'channelData'; // can be entity or channelData

      function addLivestreamingMetadata(activity, livestreamingMetadata) {
        return streamingFormat === 'entity'
          ? {
              ...activity,
              entities: [...(activity.entities ?? []), { ...livestreamingMetadata, type: 'streaminfo' }]
            }
          : {
              ...activity,
              channelData: { ...activity.channelData, ...livestreamingMetadata }
            };
      }

      run(async function () {
        const {
          React: { createElement },
          ReactDOM: { render },
          WebChat: {
            decorator: { WebChatDecorator },
            ReactWebChat
          }
        } = window; // Imports in UMD fashion.

        const { directLine, store } = testHelpers.createDirectLineEmulator();

        const styleOptions = {
          // Non-animated typing indicator.
          typingAnimationBackgroundImage: `url('')`
        };

        // renderWebChat({ directLine, store, styleOptions }, document.getElementById('webchat'));

        render(
          createElement(
            WebChatDecorator,
            {},
            createElement(ReactWebChat, {
              directLine,
              store,
              styleOptions
            })
          ),
          document.getElementById('webchat')
        );

        await pageConditions.uiConnected();

        // ---

        // WHEN: Receive an empty livestream.
        await directLine.emulateIncomingActivity(
          addLivestreamingMetadata(
            {
              from: { id: 'bot', role: 'bot' },
              id: 'a-00001',
              type: 'typing'
            },
            { streamSequence: 1, streamType: 'streaming' }
          )
        );

        // THEN: Should show typing indicator.
        await waitFor(() => expect(pageElements.typingIndicator()).toBeTruthy());

        // THEN: Should show no messages.
        await waitFor(() => expect(pageElements.activities()).toHaveLength(0));

        // THEN: Should match snapshot.
        await host.snapshot('local');

        // ---

        // WHEN: Receive another chunk livestream.
        await directLine.emulateIncomingActivity(
          addLivestreamingMetadata(
            {
              from: { id: 'bot', role: 'bot' },
              id: 'a-00002',
              text: 'A quick brown fox',
              type: 'typing'
            },
            { streamSequence: 1, streamType: 'streaming' }
          )
        );

        // THEN: Should show message.
        await waitFor(() => expect(pageElements.activities()).toHaveLength(1));
        await waitFor(() =>
          expect(pageElements.activityContents()[0]).toHaveProperty('textContent', 'A quick brown fox')
        );

        // THEN: Should hide typing indicator.
        await waitFor(() => expect(pageElements.typingIndicator()).toBeFalsy());

        // THEN: Should match snapshot.
        await host.snapshot('local');

        // ---

        // WHEN: The second livestream is finished.
        await directLine.emulateIncomingActivity(
          addLivestreamingMetadata(
            {
              from: { id: 'bot', role: 'bot' },
              id: crypto.randomUUID(),
              text: 'A quick brown fox jumped over the lazy dogs.',
              type: 'message'
            },
            { streamId: 'a-00002', streamType: 'final' }
          )
        );

        // THEN: Should show message.
        await waitFor(() => expect(pageElements.activities()).toHaveLength(1));
        await waitFor(() =>
          expect(pageElements.activityContents()[0]).toHaveProperty(
            'textContent',
            'A quick brown fox jumped over the lazy dogs.'
          )
        );

        // THEN: Should show typing indicator.
        await waitFor(() => expect(pageElements.typingIndicator()).toBeTruthy());

        // THEN: Should match snapshot.
        await host.snapshot('local');

        // ---

        // WHEN: The contentless livestream is finished.
        await directLine.emulateIncomingActivity(
          addLivestreamingMetadata(
            {
              from: { id: 'bot', role: 'bot' },
              id: crypto.randomUUID(),
              type: 'typing'
            },
            { streamId: 'a-00001', streamType: 'final' }
          )
        );

        // THEN: Should hide typing indicator.
        await waitFor(() => expect(pageElements.typingIndicator()).toBeFalsy());

        // THEN: Should not show additional message.
        await waitFor(() => expect(pageElements.activities()).toHaveLength(1));

        // THEN: Should match snapshot.
        await host.snapshot('local');
      });
    </script>
  </body>
</html>
